import QtQuick 2.0
import QtQuick.Controls 2.5
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls 1.4
import Qt.labs.platform 1.1
import QtQuick 2.14

import "../../basic"
import "./settingItems"
import "../../commonUI"

Item {

    Item {
        anchors.fill: parent
        anchors.leftMargin: 36
        anchors.topMargin: 24
        Label {
            id: setingMainTitle
            color: "white"
            font.bold: true
            text: qsTr("设置")
            font.pixelSize: 32
            font.family: BasicConfig.commFont
            anchors.left: parent.left
            anchors.right: parent.right
        }
        Flow {
            id: settingTitleFlow
            anchors.left: setingMainTitle.left
            anchors.top: setingMainTitle.bottom
            anchors.topMargin: 25
            height: 25
            spacing: 20
            Repeater {
                id: selectorRep
                anchors.fill: parent
                model: ["账号","常规","系统","播放","消息与隐藏","快捷键","音质与下载","桌面歌词","工具","关于Jtom的音乐"]
                property int selectedIndex: 0
                Item {
                    height: 40
                    width: selectorLabel.implicitWidth
                    Label {
                        id: selectorLabel
                        text: modelData
                        font.pixelSize: 20
                        font.bold: true
                        font.family: BasicConfig.commFont
                        color: selectorRep.selectedIndex === index ? "white" : "#a1a1a3"
                        anchors.centerIn: parent
                    }
                    Rectangle { // 下划线
                        visible: selectorRep.selectedIndex === index
                        anchors.left: selectorLabel.left
                        anchors.right: selectorLabel.right
                        anchors.top: selectorLabel.bottom
                        anchors.leftMargin: selectorLabel.implicitWidth / selectorLabel.font.pixelSize * 2
                        anchors.rightMargin: selectorLabel.implicitWidth / selectorLabel.font.pixelSize * 2
                        anchors.topMargin: 3
                        height: 3
                        color: "#eb4d44"
                    }
                    MouseArea {
                        anchors.fill: parent
                        hoverEnabled: true
                        onEntered: {
                            if (selectorRep.selectedIndex === index) {
                                selectorLabel.color = "white"
                            } else {
                                selectorLabel.color = "#b9b9ba"
                            }
                            cursorShape = Qt.PointingHandCursor
                        }
                        onExited: {
                            if (selectorRep.selectedIndex === index) {
                                selectorLabel.color = "white"
                            } else {
                                selectorLabel.color = "#a1a1a3"
                            }
                            cursorShape = Qt.ArrowCursor
                        }
                        onClicked: {
                            selectorRep.selectedIndex = index
                            selectorLabel.color = "white"
                        }
                    }
                }
            }
        }

        // 分割线
        CustomPliteLine {
            id: cutLine01
            anchors.top: settingTitleFlow.bottom
            anchors.topMargin: 20
            anchors.rightMargin: 20
        }

        // 滑动模块
        Flickable {
            id: flick
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: cutLine01.bottom
            anchors.bottom: parent.bottom
            anchors.topMargin: 10
            contentHeight: 4000     // 内容的高度
            clip: true              // 禁止内容超出控件
            flickDeceleration: 5000
            maximumFlickVelocity: 1000
            // 设置滚动条
            ScrollBar.vertical: ScrollBar {
                anchors.right: parent.right
                anchors.rightMargin: 5
                width: 10
                contentItem: Rectangle {
                    visible: parent.visible
                    implicitWidth: 10
                    radius: 4
                    color: "#42424b"
                }
            }
            Column {
                anchors.fill: parent
                anchors.topMargin: 30
                spacing: 30

                // 账户
                Counter { }
                // 常规
                Common { }
                // 系统
                SystomCig { }
                // 播放
                Play { }
                // 消息与隐私
                MessagePrivacy { }
                // 快捷键
                CustomShotCut { }
                // 音质与下载
                SoundQualityAndDownload { }
                // 桌面歌词
                DesktopLyrics { }
            }
        }
    }

}
